导航菜单
首页 >  文本区域 NextUI  > 自定义主题

自定义主题

自定义主题

如前文所述,NextUI 提供了两个预定义的主题,light 和 dark。这些主题本质上是灵活的,允许您根据您的特定偏好或项目需求进行定制。

此外,您还可以根据默认主题创建自己的主题。每个主题都包含 布局 令牌和 颜色 令牌,旨在简化您的定制过程。

自定义布局

您可以修改各种布局方面,包括间距单位、字体大小、行高、半径等。

布局令牌可以全局应用于所有主题,也可以专门应用于所选主题。

全局布局自定义

假设您需要在所有主题中使用更小的边框半径、更细的边框宽度以及更不透明的禁用元素。您可以通过将以下代码添加到 tailwind.config.js 文件中来实现这些更改。

// tailwind.config.jsconst {nextui} = require("@nextui-org/react");/** @type {import('tailwindcss').Config} */module.exports = { plugins: [nextui({ layout: {disabledOpacity: "0.3", // opacity-[0.3]radius: { small: "2px", // rounded-small medium: "4px", // rounded-medium large: "6px", // rounded-large},borderWidth: { small: "1px", // border-small medium: "1px", // border-medium large: "2px", // border-large}, }, themes: {light: {},dark: {}, },}), ],};

由于 NextUI 组件采用了布局令牌,因此修改将反映在所有使用它们的组件中。例如,按钮 组件使用 radius 令牌来设置边框半径,并使用 borderWidth 令牌来定义变体为 bordered 时的边框宽度。

让我们看看 按钮 组件在更改之后的样子。

import {Button} from "@nextui-org/react";export default function App() { return ( ButtonDisabled);}

请参阅 布局 部分,以了解有关可用令牌的

相关推荐: